<template>
<Layout>
    <router-link :to="{name:'home'}">{{$t('form.Login')}}</router-link>
    <div class="playground">
        <div class="color-list">
            <div class="color-item" v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }" :key="color.text">{{color.text}}</div>
        </div>
        <div class="color-show">
            <div class="color-box" v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }" :style="{'background-color':color.text}" :key="color.text">{{color.text}}</div>
        </div>
    </div>
</Layout>
</template>
<script lang="ts">
import {
    Component
} from "vue-property-decorator";
import Layout from "@/components/layout.vue";
import {
    BaseVue
} from "../base-vue";

@Component < AppComponent > ({
    components: {
        Layout
    }
})
export default class AppComponent extends BaseVue {
    data() {
        return {
            colors: [{
                    text: "Aquamarine"
                },
                {
                    text: "Hotpink"
                },
                {
                    text: "Gold"
                },
                {
                    text: "Crimson"
                },
                {
                    text: "Blueviolet"
                },
                {
                    text: "Lightblue"
                },
                {
                    text: "Cornflowerblue"
                },
                {
                    text: "Skyblue"
                },
                {
                    text: "Burlywood"
                }
            ]
        };
    }

    metaInfo() {
        return {
            // title: "test"
        };
    }
    mounted() {
        console.log(this.t("form.Login"));
        let _this = this as any;
        _this.$dragging.$on("dragend", value => {
            console.log("dragend");
            console.log(value);
        });
        // hook监听beforeDestroy生命周期
        this.$once("hook:beforeDestroy", () => {
            // 解绑绑定事件
            _this.$dragging.$off("dragend");
            console.log(_this.$dragging);
        });
    }
}
</script>
<style lang="less" scoped>
.playground {
    margin: 2rem auto;
    display: flex;
    width: 1000px;
}
.color-item {
    background: #f5f5f5;
    padding: 0.5rem;
    color: #5f5f5f;
    transition: transform 0.3s;
}
.color-item.dragging {
    background-color: #fff;
}
.color-show {
    display: flex;
    flex-wrap: wrap;
    width: 30rem;
}
.color-box {
    width: 33%;
    height: 6rem;
    background: #efefef;
    line-height: 6rem;
    text-align: center;
    color: #fff;
    transition: transform 0.3s;
}
.color-box.dragging {
    transform: scale(1.1);
}
</style>
